<template>
  <el-container class="app-container">
    <!-- 顶部导航区域 -->
    <el-header style="margin-bottom: 40px; height: 60px;">
      <TopBar/>
    </el-header>
    <!-- 主体内容区域 -->
    <el-main class="main-content">
      <!-- 项目头部信息区域 -->
      <div class="project-header">
        <div class="header-content">
          <h1 class="project-title">{{ projectMsg.projectName }}</h1>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="project-content">
        <!-- 左侧内容 -->
        <el-tabs v-model="activeTab" class="project-tabs" tab-position="left">
          <el-tab-pane label="项目管理" name="project-detail">
            <div class="panel-header">
              <h2 class="panel-title">任务列表</h2>
              <div class="panel-actions">
                <el-button
                    @click="addTask"
                    type="primary"
                    v-if="projectMsg.isCreate == '1'"
                    class="action-button"
                    icon="Plus"
                >创建任务
                </el-button>
              </div>
            </div>

            <el-card class="data-card">
              <div class="data-summary">
                <div class="summary-item">
                  <div class="summary-value">{{ assignments.length }}</div>
                  <div class="summary-label">总任务数</div>
                </div>
                <!-- 这里可以添加更多统计信息 -->
              </div>
            </el-card>

            <el-card class="table-card">
              <el-table
                  :data="assignments"
                  @row-dblclick="toPath"
                  show-overflow-tooltip="true"
                  @sort-change="handleSortChange"
                  :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{ backgroundColor: '#f9fafc', color: '#606266', fontWeight: '600', textAlign: 'center' }"
                  :fit="false"
                  class="task-table"
                  border
                  stripe
              >
                <el-table-column width="80px">
                  <template #default="scope">
                    <el-avatar :src="projectPng"/>
                  </template>
                </el-table-column>
                <el-table-column prop="level" label="优先级" width="100" sortable="custom">
                  <template #default="scope">
                    <el-tag
                        :type="scope.row.level === '2' ? 'danger' : scope.row.level === '1' ? 'primary' : 'success'"
                        effect="plain"
                        class="priority-tag"
                    >
                      {{ scope.row.level === '2' ? '极高' : scope.row.level === '1' ? '高' : '低' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="taskName" label="任务名称" width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="状态" width="100" prop="isPublish">
                  <template #default="scope">
                    <el-tag
                        :type="scope.row.isPublish === 1 ? 'success' : 'info'"
                        effect="light"
                        class="status-tag"
                    >
                      {{ scope.row.isPublish === 1 ? '已发布' : '未发布' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column width="100" label="完成度" prop="process">
                  <template #default="scope">
                    <el-progress
                        :percentage="scope.row.process"
                        :status="scope.row.process >= 100 ? 'success' : ''"
                        :stroke-width="8"
                    ></el-progress>
                  </template>
                </el-table-column>
                <el-table-column prop="taskStartTime" label="开始时间" width="180" align="center">
                  <template #default="scope">
                    <div class="time-cell">
                      <el-icon>
                        <Calendar/>
                      </el-icon>
                      <span>{{ scope.row.taskStartTime }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="taskEndTime" label="截止时间" width="180">
                  <template #default="scope">
                    <div class="time-cell">
                      <el-icon>
                        <Timer/>
                      </el-icon>
                      <span>{{ scope.row.taskEndTime }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                  <template #default="scope">
                    <div class="action-column">
                      <el-button
                          type="primary"
                          size="small"
                          @click="updateTask(scope.row)"
                          text
                          class="action-btn"
                      >
                        <el-icon>
                          <Edit/>
                        </el-icon>
                      </el-button>
                      <el-button
                          type="success"
                          size="small"
                          v-if="scope.row.isPublish === 0"
                          @click="publishTaSK(scope.row)"
                          text
                          class="action-btn"
                      >
                        <el-icon>
                          <Top/>
                        </el-icon>
                      </el-button>
                      <el-button
                          type="danger"
                          size="small"
                          @click="deleteTask(scope.row.id)"
                          text
                          class="action-btn"
                      >
                        <el-icon>
                          <Delete/>
                        </el-icon>
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="甘特图" name="grade">
            <div class="panel-header">
              <h2 class="panel-title">项目进度可视化</h2>
            </div>
            <el-card class="gantt-card">
              <Gantt ref="ganttRef"></Gantt>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
    <TaskDialog :dialogVisible="taskDialogVisible" :dialogTitle="dialogTitle" @changeDialogVisible="changeDialogVisible"
                :getList="getList" :formData="currentTask"/>
  </el-container>
</template>

<script setup>
import {ref, onMounted, watch, onBeforeMount, nextTick} from 'vue'
import TopBar from "@/components/topBar.vue";
import TaskDialog from "@/components/taskDialog.vue"
import {Calendar, Timer, Top, Edit, Delete, Plus} from "@element-plus/icons-vue";
import {get, update, remove} from "@/api/task/task.js"
import {getListById} from "@/api/project/project.js"
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import projectPng from "@/assets/img/project.png"
import Gantt from "@/components/gantt.vue"
import {useBreadcrumbStore} from '@/stores/useBreadcrumbStore.js'

const breadcrumbStore = useBreadcrumbStore();

const activeTab = ref('project-detail')
const projectMsg = ref([])
const taskDialogVisible = ref(false)
const dialogTitle = ref("新增项目")
const assignments = ref([]);
const currentTask = ref(null);
const router = useRouter()
const route = useRoute()
const ganttRef = ref(null)

watch(() => activeTab.value, (newValue) => {
  if (newValue === "project-detail" || newValue == null) {
    router.push({path: '/project-detail', query: {type: "project-detail", id: route.query.id}})
    getProjectMsg()
  } else if (newValue === "grade") {
    nextTick(() => {
      ganttRef.value.getGanttData()
    })
    router.push({path: '/project-detail', query: {type: "grade", id: route.query.id}})
  }
})


// 监听排序事件
const handleSortChange = ({prop, order}) => {
  const ascSort = order === 'descending' ? true : order !== 'ascending'
  getList(ascSort)

}

onBeforeMount(() => {
  getProjectMsg()
})
onMounted(() => {
  activeTab.value = route.query.type
  getList()
})

const getProjectMsg = async () => {
  const res = await getListById(route.query.id)
  if (res.data.code === 200) {
    ElMessage.success("获取数据成功")
    projectMsg.value = res.data.result[0]
  }
}

const getList = async (ascSort) => {
  const res = await get({
    "projectId": route.query.id,
    "orderAsc": ascSort
  })
  if (res.data.code === 200) {
    ElMessage.success('获取数据成功')
    assignments.value = res.data.result
    assignments.value.forEach(item => {
      item.level = item.level + ""
    })
  } else {
    ElMessage.success('获取数据失败')
  }
}

const addTask = () => {
  currentTask.value = {}; // 清空当前任务
  dialogTitle.value = "新增项目"
  taskDialogVisible.value = true
}

const updateTask = (task) => {
  currentTask.value = {...task}; // 设置当前任务为选中的任务
  dialogTitle.value = "编辑项目"
  taskDialogVisible.value = true
}

const deleteTask = async (id) => {
  const res = await remove(id)
  if (res.data.code === 200) {
    ElMessage.success('删除成功')
    await getList()
  } else {
    ElMessage.success('删除失败')
  }

}

const publishTaSK = async (task) => {
  task.isPublish = 1
  const formData = new FormData();
  formData.append('taskRequest', new Blob([JSON.stringify(task)], {type: 'application/json'})); // JSON 数据
  const res = await update(formData)
  if (res.data.code === 200) {
    ElMessage.success('发布成功')
    await getList()
  } else {
    ElMessage.success('发布失败')
  }
}

const changeDialogVisible = (value) => {
  taskDialogVisible.value = value
}
const toPath = async (row) => {
  await router.push({path: '/task_detail', query: {id: row.id}})
  breadcrumbStore.adjustBreadcrumb({
    name: '任务详情',
    path: route.fullPath, // 获取完整路径（包含参数）
    level: 3
  });
}

</script>

<style scoped>
.app-container {
  margin-top: 50px;
  min-height: calc(100vh - 70px);
  background-color: #f4f6fa;
}

.main-content {
  width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
:deep(.el-tabs__content){
  padding: 20px !important;
}
/* 项目头部 */
.project-header {
  position: relative;
  border-radius: 16px;
  background: url('https://img.freepik.com/free-vector/gradient-network-connection-background_23-2148865392.jpg?w=1380&t=st=1681234025~exp=1681234625~hmac=dcc2416b3b3325b3cfee74f3c5e3b715945aa48d8e68db3bbf1f17c7c2dc679a') no-repeat center center;
  background-size: cover;
  color: white;
  padding: 40px 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.project-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.85), rgba(103, 194, 58, 0.85));
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.project-actions {
  display: flex;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 项目内容 */
.project-content {
  display: flex;
  gap: 30px;
}

/* 选项卡 */
.project-tabs {
  flex: 1;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 面板标题 */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 22px;
}

.panel-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.panel-actions {
  display: flex;
  gap: 10px;
}

.action-button {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  transition: all 0.3s;
}

.action-button:hover {
  transform: translateY(-2px);
}

/* 数据卡片 */
.data-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.data-summary {
  display: flex;
  gap: 40px;
  padding: 20px;
}

.summary-item {
  text-align: center;
}

.summary-value {
  font-size: 32px;
  font-weight: 700;
  color: #409EFF;
  line-height: 1;
}

.summary-label {
  font-size: 14px;
  color: #909399;
  margin-top: 8px;
}

/* 表格卡片 */
.table-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.task-table {
  margin: 0;
}

.time-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.priority-tag, .status-tag {
  border-radius: 20px;
  padding: 2px 10px;
  font-weight: 500;
}

.priority-tag.el-tag--danger {
  background-color: rgba(245, 108, 108, 0.15);
  color: #f56c6c;
}

.priority-tag.el-tag--primary {
  background-color: rgba(64, 158, 255, 0.15);
  color: #409EFF;
}

.priority-tag.el-tag--success {
  background-color: rgba(103, 194, 58, 0.15);
  color: #67C23A;
}

.action-column {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.action-btn {
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.action-btn:hover {
  transform: translateY(-2px);
}

/* 甘特图卡片 */
.gantt-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  min-height: 600px;
}

/* Element UI 样式覆盖 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  font-weight: 600;
  background-color: #f9fafc;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
}

:deep(.el-tabs__item.is-active) {
  color: #409EFF;
  font-weight: 600;
}

:deep(.el-tabs__nav) {
  padding: 20px 0;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: rgba(64, 158, 255, 0.08);
}

:deep(.el-progress-bar__outer) {
  border-radius: 10px;
}

:deep(.el-progress-bar__inner) {
  border-radius: 10px;
}

/* 确保兼容原有布局 */
:deep(.cell) {
  width: 100% !important;
}

:deep(.el-table__body) {
  width: 100% !important;
}

:deep(.el-scrollbar__view) {
  width: 100% !important;
}

:deep(.el-table__header) {
  width: 100% !important;
}
</style>
